require(['./config'], () => {
    require(['template', 'request','header','header2','elevatezoom', 'shopcar',  'footer', 'jquery'],(template, req,header,header2)=>{
        class Details{
            constructor() {
                this.getData()
                this.scorll()
            }
            getData() {
                // 获取地址栏 id 
                const id = window.location.search.split('=')[1]
                // console.log(id)
                req.getDetailsData(id)
                    .then(res => {
                        //    console.log(res)
                        if (res.code === 200) {
                            this.render(res.data.detail)
                        }
                    })
            }
             // 渲染页面
            render(res){
                // 在这儿先把需要的数据结构出来 再传到 模板里面去
                const { image, id, photo, saleNum, title, descContentList, price } = res
                /* 
                    image 主图
                    id  商品id
                    photo 放大镜的小图片
                    saleNum 销量
                    title 标题
                    descContentList 详情
                    price 商品价格
                */
                const html = template('detailsTemplate', { image, id, photo, saleNum, title, price })
                $('.details').html(html)
                $('.imglist').html(template('miaoshu', { descContentList }))
                $('.fix .typepage').html(template('title', { title }))
                //切换主图
                $('.color>div').click(function(){
                    if($(this).hasClass('a')){
                        $('.mainImg').attr('src',photo[0].url)
                    }else if($(this).hasClass('b')){
                        $('.mainImg').attr('src',photo[1].url)
                    }
                })
                $('.norms>div').click(function(){
                    if($(this).hasClass('a')){
                        $('.mainImg').attr('src',photo[2].url)
                    }else if($(this).hasClass('b')){
                        $('.mainImg').attr('src',photo[3].url)
                    }
                })
                this.choose()
                this.addcar(image, id, title, price)
                this.initZoom()
            }
            choose(){
                $('.color>.a').css({
                    color:'#ff6700',
                    borderColor:'#ff6700'
                })
                $('.norms>.a').css({
                    color:'#ff6700',
                    borderColor:'#ff6700'
                })
                $('.color').children().click(function(){
                    $(this).css({
                        color:'#ff6700',
                        borderColor:'#ff6700'
                    }).siblings().css({
                        color:'#757575',
                        borderColor:'#e0e0e0'
                    })
                })
                $('.norms').children().click(function(){
                    $(this).css({
                        color:'#ff6700',
                        borderColor:'#ff6700'
                    }).siblings().css({
                        color:'#757575',
                        borderColor:'#e0e0e0'
                    })
                })
            }
            scorll(){
                $(window).scroll(function(){	
                    if($('html').scrollTop()>=140){
                        $('.fix').addClass('gundong')
                    }else{
                        $('.fix').removeClass('gundong')
                    }
                })
            }
            addcar(image,id,title,price){
                let count =1
                $('.btn>.shopcar').click(()=>{
                    // count++
                    //先把localStorage里的数据获取出来
                    let goods = localStorage.getItem('goods')
                    
                    if(goods){
                        //对里面的数据进行匹配，只要有一个的id等于此id，就把它返出来
                        goods = JSON.parse(goods)
                        const flag = goods.some((item,index) => {
                            return item.id === id
                        })
                        //进行判断，如果有匹配怎么样，没有匹配的怎么样
                        if(flag){
                            //有的话先把数据转成对象
                            //遍历一下数据，再根据id进行匹配
                            goods.forEach(item=>{
                                //如果匹配上了就再加一条相同的数据
                                if(item.id===id){
                                    item.count +=1
                                }else{
                                    item.count +=0
                                }
                            })
                        }else{
                            goods.push({id,image,title, price,count})
                        }
                        localStorage.setItem('goods',JSON.stringify(goods))
                    }else{
                        localStorage.setItem('goods',JSON.stringify([{id,image,title, price,count}]))
                    }
                    $('.tianjia').fadeIn(500,() => {
                        $('.tianjia').fadeOut(1000)
                    })
                    header.car()
                    header2.car()
                })
            }
            //放大镜
            initZoom() {
                $('.mainImg').elevateZoom({
                    gallery:'goodpicsbox'
                })
            }
        }
        return new Details()
    })
})